<template>
  <div class="main-body">
    <comm-header title="商品管理"></comm-header>
    <div class="circle-box">
      <!-- 搜索栏 -->
      <el-form class="comm-row search-form" :inline="true" ref="searchForm" :model="searchForm">
        <el-form-item label="商品名称" prop="name">
          <el-input placeholder="请输入商品名称" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="clearForm">清空</el-button>
        </el-form-item>
         <el-form-item>
          <el-button icon="el-icon-plus" @click="openDialog">添加</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background:'#F5F5F5',height:'55px'}"
      >
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="库存" prop="stock"></el-table-column>
        <el-table-column label="主图">
          <template v-slot="{row}">
              <img :src="row.mainImg"  class="table-img"/>
          </template>
        </el-table-column>
        <el-table-column label="滚动图">
          <template v-slot="{row}">
              <img :src="row.listImg"  class="table-img"/>
          </template>
        </el-table-column>
        <el-table-column label="商品简介" prop="intro"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <div class="comm-pagebox">
        <pagination @pagination="getPanigation" :total="total" v-show=" tableData.length > 0" :page="searchForm.page" :limit="searchForm.size"/>
      </div> -->
    </div>

    <!-- 添加商品 -->
    <el-dialog
      title="添加商品"
      width="30%"
      class="inner-dialog friend-dialog"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <div class="dialog-box">
        <el-form  ref="addForm" :model="addForm" :rules="rules" label-width="140px">
          <el-form-item label="商品名称" prop="name">
            <el-input placeholder="请输入商品名称" v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input placeholder="请输入价格" v-model="addForm.price" @input="addForm.price = addForm.price.replace(/^[^\d]+/g, '')"></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input placeholder="请输入库存" v-model="addForm.stock" @input="addForm.stock = addForm.stock.replace(/^[^\d]+/g, '')"></el-input>
          </el-form-item>
          <el-form-item label="商品主图" prop="mainImg">
              <div class="upload-box">
                <div v-if="addForm.mainImg !==''" class="img-item">
                    <img :src="addForm.mainImg" class="upload-img" />
                </div>
                <div class="file" >
                  <i class="el-icon-plus" style="font-size:32px;font-weight:550" />
                  <input type="file" id="photo" @change="chooseImgVideo($event,0)"  accept="image/*"  />
                </div>
              </div>
          </el-form-item>
          <el-form-item label="商品滚动图" prop="listImg">
              <div class="upload-box">
                <div v-if="addForm.listImg !==''" class="img-item">
                    <img :src="addForm.listImg" class="upload-img" />
                </div>
                <div class="file" >
                  <i class="el-icon-plus" style="font-size:32px;font-weight:550" />
                  <input type="file" id="photo" @change="chooseImgVideo($event,1)"  accept="image/*"  />
                </div>
              </div>
          </el-form-item>
          <el-form-item label="简介" prop="intro">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" v-model="addForm.intro" class="details" placeholder="请输入简介"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button :loading="loading" @click="handleSub" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Pagination from "@/components/Pagination";
import CommHeader from "@/components/goods/CommHeader.vue";
import {get,post} from "@/utils/request";
import {isOverSize} from "@/utils/validate";
export default {
  data() {
    return {
      searchForm: {
        page: 1,
        size: 10,
        name:"",
      },
      time: "",
      total: 2,
      tableData: [],
      dialogVisible: false,
      typeData:[],
      addForm:{
        name:'',
        price:'',
        stock:'',
        mainImg:'',
        listImg:'',
        intro:'',
      },
      loading:false,
      rules:{
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }
          ],
          price:[
            {
              required: true,
              message: '请输入价格',
              trigger: 'blur'
            }
          ],
          stock:[
            {
              required: true,
              message: '请输入库存',
              trigger: 'blur'
            }
          ],
          mainImg:[
            {
              required: true,
              message: '请上传商品主图',
              trigger: 'change'
            }
          ],
          listImg:[
            {
              required: true,
              message: '请上传商品滚动图',
              trigger: 'change'
            }
          ],
          intro:[
            {
              required: true,
              message: '请输入简介',
              trigger: 'change'
            }
          ]
      },
      gHost:'https://plaza.juke1.xyz'
    };
  },
  components: {
    CommHeader,
    // Pagination,
  },
  created(){
    this.getList();
  },
  methods: {
    /**
     * 列表
     */
    getList(stock){
      if(stock){
        this.searchForm.page=1;
        this.searchForm.size=10;
      }
      get("good/get",this.searchForm).then((response)=>{
        if(response.code ==0){
          this.tableData=response.data.map((v)=>{
            v.mainImg=this.gHost + v.mainImg;
            v.listImg=this.gHost + v.listImg;
            return v;
          });
        }else{
          this.$message.error(response.msg);
        }
      })
    },

    //清空查询条件
    clearForm(){
      this.$refs['searchForm'].resetFields();
      this.time="";
      this.searchForm.startTime="";
      this.searchForm.endTime="";
      this.getList(1)
    },

    //获取子组件分页信息
    getPanigation(obj) {
      this.searchForm.page = obj.page;
      this.searchForm.size = obj.limit;
    },

    /**
     * 上传图片
     */
    chooseImgVideo(event,type){
      var file=event.currentTarget.files[0];
      var formData = new FormData();
      formData.append('image', file);
      if(isOverSize(file.size,2)){
        this.$message.warning("图片大小不能超过2MB");
        return;
      }
      post("/common/upload_img",formData).then((response)=>{
        if(response.code ==0){
            if(type ===0){
              this.addForm.mainImg=this.gHost + response.data;
            }else if(type ===1){
              this.addForm.listImg=this.gHost + response.data;
            }
        }else{
          this.$message.error(response.message);
        }
      })
    },

    /**
         * 打开弹窗
         */
    openDialog(){
      this.dialogVisible=true;
      this.$nextTick(()=>{
          this.$refs.addForm.resetFields();
          this.$refs.addForm.clearValidate();
      })
    },

    /**
    * 添加
    */
    handleSub(){
      this.$refs.addForm.validate(async (valid) => {
          if (valid) {
              this.loading=true;
              post("/good/save",this.addForm).then((response)=>{
                  if(response.code ==0){
                    this.$message.success('操作成功');
                    this.getList();
                  }else{
                    this.$message.error(response.message);
                  }
                  this.loading=false;
                  this.dialogVisible=false;
              })
          }
      })   
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/main.scss";
.circle-box {
  padding: 0 30px;
  .search-form {
    display: flex;
    flex-flow: wrap;
    padding: 30px 0 20px 0;
  }
  .play {
    width: 24px;
    height: 24px;
    margin-right: 8px;
  }
}
.dialog-box {
  padding-right: 100px;
  img {
    width: 100%;
    height: 260px;
    object-fit: cover;
  }
  .user-box {
    position: absolute;
    right: 20px;
    margin: -35px 0 0 0;
    text-align: right;
    strong {
      font-size: 15px;
      padding: 5px 8px 0 0;
      color: #ffffff;
    }
    .signature{
      font-size: 13px;
      color: #999999;
      padding: 5px 0;
    }
  }
  .list-box {
    margin-top: 75px;
    height: 300px;
    overflow-y: scroll;
    .year{
      padding: 0 0 10px 20px;
      font-size: 18px;
      font-weight: 700;
    }
    .list-item {
      display: flex;
      padding: 0 20px 25px 20px;
      strong {
        width: 90px;
        font-size: 15px;
      }
      .name-box {
        .name {
          max-width: 370px;
          font-size: 14px;
          padding-bottom: 13px;
        }
        .video{
          width: 150px;
          height: 180px;
          object-position: top;
        }
      }
      .time {
        font-size: 13px;
        padding-top: 8px;
        color: #999999;
      }
    }
  }
}
.table-img{
    width: 50px;
    height: 50px;
    object-fit: cover;
}
</style>